<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body>
    <div>
        <button type="button" id="addUser" class="layui-btn layui-btn-normal">新增</button>
    </div>
    <div>
        <table id="demo" lay-filter="test"></table>
    </div>
</body>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="none">
    layui.use(['table','jquery'], function() {
        var table = layui.table;
        var $ = layui.jquery;

        //第一个实例
        function loadTable(){
            table.render({
                elem: '#demo'
                , url: '/getUserList' //数据接口
                , page: true //开启分页
                , cols: [[ //表头
                    {type: 'numbers', title: '序号', width: 80, fixed: 'left'}
                    , {field: 'username', title: '角色名'}
                    , {field: 'gender', title: '性别',width: 100,templet:function (d) {
                            if(d.gender==1){
                                return `男`
                            }else {
                                return '女'
                            }
                        }}
                    , {field: 'phone', title: '手机号',width: 120}
                    , {field: 'roleStr', title: '角色',width: 250}
                    , {
                        title: '操作', width: 240, templet: function (d) {
                            return `
                        <button lay-name="user" type="button" id="edit" class="layui-btn layui-btn-xs" lay-msg="${d.id}">编辑</button>
                        <button lay-name="user1" type="button" class="layui-btn layui-btn-danger layui-btn-xs" lay-msg="${d.id}">删除</button>
                        `
                        }
                    }
                ]]
                , parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "msg": '数据获取失败', //解析提示文本
                        "count": res.length, //解析数据长度
                        "data": res //解析数据列表
                    };
                }
            });
        }
        loadTable()

        // 新增按钮
        $("#addUser").click(function () {
            layer.open({
                type: 2,
                title: '编辑',
                area: ['520px', '450px'],
                content: '/toLayer/user/add/0',
                btn: ['提交','取消'],
                yes: function (index, layero) {
                    //按钮【按钮一】的回调
                    var body = layer.getChildFrame('body', index);
                    //var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                    let serialize = $(body).children("#addUser").serialize();
                    $.ajax({
                        type: 'delete',
                        url: '/addUser',
                        data: serialize,//'ids='+arr+'&_method=delete',
                        success: function(data){
                            if(data.code==200){
                                layer.msg(data.message, {icon: 1,time:1000});
                                loadTable()
                            }else {
                                layer.msg(data.message, {icon: 2,time:1000});
                            }
                            layer.close(index);
                        },
                        error: function(data){
                            layer.msg(data.message, {icon: 2,time:1000});
                        }
                    });
                },
                btn2:function (index, layero) {

                }
            });
        })

        $(document).on('click', 'button[lay-name="user"]', function () {
            layer.open({
                type: 2,
                title: '编辑',
                area: ['520px', '450px'],
                content: '/toLayer/user/' + $(this).attr("id") + '/' + $(this).attr("lay-msg"),
                btn: ['提交','取消'],
                yes: function (index, layero) {
                    //按钮【按钮一】的回调
                    var body = layer.getChildFrame('body', index);
                    $(body).children("#roleList").click();
                    let valStr = $(body).children("#roleList").val();
                    let serialize = $(body).children("#editRole").serialize()+"&roleList="+valStr;
                    $.ajax({
                        type: 'post',
                        url: '/updateUser',
                        data: serialize,//'ids='+arr+'&_method=delete',
                        success: function(data){
                            if(data.code==200){
                                layer.msg(data.message, {icon: 1,time:1000});
                                loadTable()
                            }else {
                                layer.msg(data.message, {icon: 2,time:1000});
                            }
                            layer.close(index);
                        },
                        error: function(data){
                            layer.msg(data.message, {icon: 2,time:1000});
                        }
                    });
                },
                btn2:function (index, layero) {
                }
            });
        });

        $(document).on('click', 'button[lay-name="user1"]', function () {
            var id = $(this).attr("lay-msg");
            layer.open({
                content: '是否确定删除'
                ,btn: ['确定', '取消']
                ,yes: function(index, layero){
                    //按钮【按钮一】的回调
                    $.post("/deleteUserById",{id:id},function (data) {
                        if(data.code==200){
                            layer.msg(data.message, {icon: 1,time:1000});
                            loadTable()
                        }else {
                            layer.msg(data.message, {icon: 2,time:1000});
                        }
                    })
                }
                ,btn2: function(index, layero){
                    //按钮【按钮二】的回调
                    //return false 开启该代码可禁止点击该按钮关闭
                }
            });
        });


    });
</script>
</html>